<template>
	<qh-tabbar-page-view current="2" title="门店">
		<view class="page-box flex-column flex-column-100">
			<view class="search-box">
				<view class="search-content flex-cn">
					<text class="qh-rt-single qh-rt-a-zu2432 search-icon"></text>
					<input class="search-input" type="text" v-model="searchForm.store_name" placeholder="请输入门店名称" placeholder-class="pl" @confirm="searchData">
					<view class="search-btn flex-cn-cn" @click="searchData">搜索</view>
				</view>
			</view>
			<view class="sort-box flex-spb-cn">
				<view class="sort-item flex-cn-cn" :class="{'checked': searchForm.distance_sort == '' && searchForm.sales_volume_sort == ''}">
					<text @click="resetSort">全部</text>
				</view>
				<view class="sort-item flex-cn-cn" :class="{'checked': searchForm.distance_sort != ''}">
					<!-- <text>距离</text> -->
					<qh-sort-check v-model="searchForm.distance_sort" @change="distanceSort">距离</qh-sort-check>
				</view>
				<view class="sort-item flex-cn-cn" :class="{'checked': searchForm.sales_volume_sort != ''}">
					<!-- <text>销量</text> -->
					<qh-sort-check v-model="searchForm.sales_volume_sort" @change="salesVolumeSort">销量</qh-sort-check>
				</view>
			</view>
			<view class="content-box flex-column-100">
				<scroll-view scroll-y="true" class="scroll-view" :show-scrollbar="false" @scrolltolower="getDataList" refresher-enabled
					@refresherrefresh="pullDownRefresh" :refresher-triggered="isRefresh" refresher-background="transparent">
					<view class="scroll-view-content tabbar-page-bottom">
						<view class="store-item flex-start" v-for="(item, index) in dataList" :key="index" @click="toStore(item.store_id)">
							<qh-image :src="item.store_image_url" size="172" radius="12">
								<view slot="empty" class="empty-image flex-cn-cn">
									<text class="qh-rt-single qh-rt-mendian empty-image-icon"></text>
								</view>
							</qh-image>
							<view class="store-item-content">
								<view class="flex-cn">
									<text class="store-tag" v-if="showStoreTypeState">{{item.store_class == 1 ? '直营店' : '加盟店'}}</text>
									<view class="store-name">
										<view class="text-ellipsis">{{item.store_name}}</view>
									</view>
								</view>
								<view class="business-time flex-cn flex-wrap">
									<text>营业时间：</text>
									<text v-for="(time, i) in item.business" :key="i">{{time}}</text>
								</view>
								<view class="goods-sale flex-cn">
									<text>在售商品{{handleTotal(item.on_sale_goods_count)}}</text>
									<text>总销量{{handleTotal(item.sales_volume)}}</text>
								</view>
								<view class="coupon-list flex-cn flex-wrap">
									<view class="coupon-item" v-for="(coupon, i) in item.coupon_list" :key="i">{{coupon}}</view>
								</view>
							</view>
							<view class="position-box">
								<view class="position-text">去下单</view>
								<view class="position-distance flex">
									<text class="qh-rt-single qh-rt-a-zu4414 position-icon"></text>
									<view class="position-distance-text-box">
										<text class="position-distance-text">{{item.distance}}km</text>
									</view>
								</view>
							</view>
						</view>
						<qh-loaded-tip v-if="!canLoad && !isLoading" :text="dataList.length ? '没有更多了' : '暂无门店'"></qh-loaded-tip>
					</view>
				</scroll-view>
			</view>
		</view>
	</qh-tabbar-page-view>
</template>

<script>
	export default {
		data() {
			return {
				searchForm: {
					store_name: '',
					page: 1,
					limit: 10,
					longitude: '',
					latitude: '',
					distance_sort: 1, //距离排序 1升序 2降序
					sales_volume_sort: '', //销量排序 1升序 2降序
				},
				isRefresh: false,
				isLoading: false,
				canLoad: true,
				dataList: [],
			}
		},
		computed: {
			showStoreTypeState() {
				return this.$store.showStoreTypeState;
			},
		},
		async onLoad() {
			await this.$onLaunched;

			const position = await this.$mutations.getLocation();
			if (position) {
				this.searchForm.longitude = position.longitude;
				this.searchForm.latitude = position.latitude;
			}
			this.getDataList();
		},
		methods: {
			//处理统计值
			handleTotal(num) {
				if (num >= 100000) {
					return '10w+'
				}
				if (num >= 10000) {
					return '1w+'
				}
				if (num >= 1000) {
					return '999+';
				}
				return num;
			},
			//打开门店首页
			toStore(id) {
				this.$store.store_id = id;
				this.$store.begin_store_id = id;
				uni.navigateTo({
					url: '/pages/store/store'
				})
			},
			async pullDownRefresh() {
				this.isRefresh = true;
				await this.searchData();
				uni.showToast({
					title: '刷新成功',
					duration: 800
				})
				this.isRefresh = false;
			},
			//全部
			resetSort() {
				this.searchForm.distance_sort = '';
				this.searchForm.sales_volume_sort = '';
				this.searchData();
			},
			//按距离
			distanceSort() {
				this.searchForm.sales_volume_sort = '';
				this.searchData();
			},
			//按销量
			salesVolumeSort() {
				this.searchForm.distance_sort = '';
				this.searchData();
			},
			async searchData() {
				this.searchForm.page = 1;
				this.canLoad = true;
				await this.getDataList();
			},
			async getDataList() {
				if (this.isLoading || !this.canLoad) return;
				this.isLoading = true;
				const {
					status,
					data
				} = await this.$request('SmallProgramApi/Store/getMerchantStoreList', this.searchForm);
				if (status == 1) {
					if (this.searchForm.page == 1) {
						this.dataList = data.list;
					} else {
						this.dataList.push.apply(this.dataList, data.list);
					}
					this.searchForm.page++;
					this.isLoading = false;
					this.canLoad = this.dataList.length < data.count * 1 ? true : false;
				}
			},
		}
	}
</script>

<style lang="scss">
	.page-box {
		background-color: #FFFFFF;

		.search-box {
			height: 88rpx;
			padding: 12rpx 24rpx;
			box-sizing: border-box;
			background-color: #FFFFFF;
			z-index: 2;

			.search-content {
				height: 100%;
				width: 100%;
				padding: 0 0 0 24rpx;
				border: 2rpx solid var(--primary-color);
				border-radius: 34rpx;
				box-sizing: border-box;

				.search-icon {
					font-size: 28rpx;
					color: #999999;
				}

				.search-input {
					flex: 1;
					font-size: 28rpx;
					line-height: 48rpx;
					color: #333333;
					margin: 0 10rpx;
					height: 48rpx;
				}

				.search-btn {
					width: 124rpx;
					height: 100%;
					font-size: 28rpx;
					color: #FFFFFF;
					text-align: center;
					line-height: 48rpx;
					background-color: var(--primary-color);
					border-radius: 32rpx;
					margin-right: -1rpx;
				}
			}
		}

		.sort-box {
			height: 68rpx;
			box-shadow: 0 0 16rpx rgba(0, 0, 0, 0.05);
			z-index: 1;

			.sort-item {
				flex: 1;
				font-size: 28rpx;
				line-height: 48rpx;
				color: #333333;
				text-align: center;

				&.checked {
					color: var(--primary-color);
				}

				&:nth-child(2) {
					margin: 0 9rpx;
				}
			}
		}

		.content-box {
			background-color: #F8F8F8;

			.store-item {
				background-color: #FFFFFF;
				border-radius: 12rpx;
				margin: 20rpx 20rpx 0;
				padding: 24rpx 0 24rpx 20rpx;

				&:nth-last-child(1) {
					margin-bottom: 20rpx;
				}

				.empty-image {
					width: 100%;
					height: 100%;
					background-color: #F2F3F5;
					box-sizing: border-box;

					.empty-image-icon {
						font-size: 72rpx;
						color: #cccccc;
					}
				}

				.store-item-content {
					flex: 1;
					padding: 0 20rpx;
					box-sizing: border-box;
					overflow: hidden;

					.store-tag {
						width: 76rpx;
						height: 32rpx;
						font-size: 20rpx;
						color: #FFFFFF;
						text-align: center;
						line-height: 32rpx;
						border-radius: 4rpx;
						margin-right: 8rpx;
						background: linear-gradient(90deg, rgba(var(--primary-rgb-color), 0.75) 0%, var(--primary-color) 100%);
					}

					.store-name {
						flex: 1;
						font-size: 32rpx;
						color: #333333;
						line-height: 32rpx;
						font-weight: 500;
						overflow: hidden;
					}

					.business-time {
						font-size: 24rpx;
						color: #999999;
						line-height: 36rpx;
						margin-top: 14rpx;

						text:nth-child(3) {
							margin-right: 28rpx;
						}
					}

					.goods-sale {
						font-size: 24rpx;
						color: #999999;
						line-height: 36rpx;
						margin-top: 4rpx;

						text:nth-child(1) {
							margin-right: 24rpx;
						}
					}

					.coupon-list {
						margin-top: 4rpx;

						.coupon-item {
							height: 32rpx;
							border: 1rpx solid var(--primary-color);
							border-radius: 6rpx;
							padding: 0 8rpx;
							font-size: 20rpx;
							line-height: 30rpx;
							box-sizing: border-box;
							color: var(--primary-color);
							margin: 10rpx 16rpx 0 0;

							&:nth-last-child(1) {
								margin-right: 0;
							}
						}
					}
				}

				.position-box {
					width: 164rpx;
					border-left: 1rpx solid #F0F0F0;
					padding: 24rpx;
					box-sizing: border-box;

					.position-text {
						font-size: 28rpx;
						line-height: 48rpx;
						color: #333333;
						width: 100%;
						text-align: center;
					}

					.position-distance {
						font-size: 28rpx;
						line-height: 32rpx;
						color: #333333;
						margin-top: 4rpx;

						.position-icon {
							font-size: 24rpx;
							line-height: 32rpx;
							margin-right: 8rpx;
						}

						.position-distance-text-box {
							flex: 1;
							overflow: hidden;

							.position-distance-text {
								white-space: pre-wrap;
								max-width: 100%;
								overflow: hidden;
								word-break: break-all;
								text-align: center;
							}
						}
					}
				}
			}
		}
	}
</style>
